<template>
  <div>
    <div class="main_div">
      <div class="title">
        <span>教师认证</span>
        <span class="title-tips">
            教师可以再次提交资料进行认证
        </span>
      </div>
      <el-divider></el-divider>
      <div style="text-align: left" v-if="!showDetail">
        <el-form :model="approveData"
                 style="padding-top: 30px"
                 label-width="120px"
                 v-loading="approveLoading">
          <el-form-item label="认证头衔"
                        prop="nickname">
            <el-input v-model="approveData.office"
                      autocomplete="off"
                      class="inputDiv"
                      type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="往期作品链接"
                        prop="nickname">
            <el-input v-model="approveData.work"
                      autocomplete="off"
                      class="inputDiv"
                      type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="认证图片">
            <div style="width: 300px;height: 200px" v-if="approveData.imageUrl != ''">
              <el-image v-bind:src="approveData.imageUrl"
                        :preview-src-list="[approveData.imageUrl]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <el-upload
              :auto-upload="true"
              action=""
              :show-file-list="false"
              :http-request="fileUpload"
              :multiple="false">
              <el-button size="small" type="primary" >
                <span>点击上传</span>
              </el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <div style="text-align: right">
          <el-button type="info" @click="cancelEdit" v-if="isEdit">取消</el-button>
          <el-button type="primary" @click="createApprove">提交</el-button>
        </div>
      </div>
      <div v-else style="text-align: left">
        <el-form :model="detailApproce"
                 style="padding-top: 30px"
                 label-width="120px">
          <el-form-item label="认证头衔"
                        prop="nickname">
            <el-input v-model="detailApproce.office"
                      :disabled="true"
                      autocomplete="off"
                      class="inputDiv"
                      type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="认证时间"
                        prop="nickname">
            <el-input v-model="detailApproce.createTime"
                      :disabled="true"
                      autocomplete="off"
                      class="inputDiv"
                      type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="认证状态">
            <el-tag type="warning" v-if="detailApproce.state === 1">待审核</el-tag>
            <el-tag type="success" v-if="detailApproce.state === 2">通过</el-tag>
            <el-tag type="danger" v-if="detailApproce.state === 3">未通过</el-tag>
          </el-form-item>

          <el-form-item label="原因" v-if="detailApproce.state === 3">
            <el-input type="textarea"
                      :disabled="true"
                      v-model="detailApproce.message"
            ></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: right" v-if="!(detailApproce.state === 1)">
          <el-button @click="toEdit">
            修改
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'TeacherApprove',
  data () {
    return {
      approveData: {
        imageUrl: ''
      },
      approveLoading: false,
      detailApproce: {},
      showDetail: false,
      isEdit: false
    }
  },
  computed: mapState({
    user: 'user'
  }),
  mounted () {
    this.getApprove()
  },
  methods: {
    async fileUpload (file) {
      var _this = this
      var host = this.$store.state.ossData.host
      var response = this.$Utils.getSignature('teacherImage')
      var requestData = new FormData()
      await response.then(res => {
        requestData = this.$Utils.fileUpload(file.file, res)
      })
      await this.$axios.post(host, requestData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          let complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
          file.onProgress({percent: complete})
        }
      })
        .then(function (response) {
          // eslint-disable-next-line eqeqeq
          if (response.status == 200) {
            _this.approveData.imageUrl = host + '/' + requestData.get('key')
          }
        })
    },
    createApprove () {
      var _this = this
      var approveData = JSON.parse(JSON.stringify(this.approveData))
      approveData.userId = this.user.userId
      this.$axios.post('/api/user/addApprove',
        this.$qs.stringify({
          approveData: JSON.stringify(approveData)
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.$message({
              message: '提交成功!',
              type: 'success'
            })
            _this.getApprove()
          } else {
            _this.$message({
              message: '失败，请重试',
              type: 'warning'
            })
          }
        })
    },
    getApprove () {
      var _this = this
      this.$axios.post('/api/user/getDetailApproveByUId',
        this.$qs.stringify({
          userId: this.user.userId
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.detailApproce = data.result
            if (data.result != null) {
              _this.showDetail = true
              _this.isEdit = false
            }
          }
        })
    },
    toEdit () {
      this.showDetail = false
      this.isEdit = true
    },
    cancelEdit () {
      this.isEdit = false
      this.showDetail = true
    }
  }
}
</script>

<style scoped>
  .main_div {
    margin-top: 20px;
  }
  .title {
    text-align: left;
    padding-left: 20px;
    font-size: 20px;
    font-weight: bolder;
  }

  .main_div .el-divider--horizontal{
    margin: 12px 0px;
  }
  .title-tips{
    font-size: 12px;
    color: #93999f;
    margin-left: 18px;
    font-weight: 400;
  }
</style>
